<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>会员页面导航</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			height: 800px;
			background: url(img/2.jpg) center top no-repeat #ffdf7e;
		}

		#list {
			width: 100%;
			height: 90px;
			background: rgba(0, 0, 0, 0.5);
			/* opacity: 0.5; */
		}

		#list img {
			width: 143px;
			height: 90px;
			float: left;
			margin-left: 142px;
			margin-right: 22px;
		}

		ul {
			list-style: none;
			/*margin:16px auto;*/
			margin-left: 150px;
			margin-top: 0px;
			padding-left: 50px;
			height: 50px;
			line-height: 88px;
		}

		li {
			display: inline-block;
			margin-right: 15px;
		}

		a {
			color: white;
			font-size: 16px;
			text-decoration: none;
		}

		a:hover {
			color: rgb(250, 51, 51);
		}

		/*登录按钮*/
		#login {
			padding: 5px 10px;
			color: #FAD65C;
			border: 1px solid #FAD65C;
			border-radius: 10px;
			margin-left: 20px;
		}

		/*开通超级会员按钮*/
		#open {
			padding: 6px 20px;
			background: #FAD65C;
			border-radius: 10px;
			color: rgb(196, 124, 30);
		}

		#login:hover {
			background: #fad65c;
			color: white;
		}

		#open:hover {
			background: rgb(255, 231, 151);
		}

		.banner {
			height: 390px;
		}

		.banner1 {
			position: relative;
			left: 19%;
			top: 8px;
			width: 800px;
			height: 406px;
		}

		.circle {
			/* position: absolute; */
			bottom: 10px;
			width: 100%;
			text-align: center;
			height: 14px;
		}

		.circle .box {
			display: inline-block;
			border-radius: 7px;
			margin-left: -65px;
			margin-top: -100px;
			font-size: 0;
		}

		.circle .box li {
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #fff;
			cursor: pointer;
			margin: 2px;
		}

		.circle .box .active {
			background: #ff5000;
		}

		.recommendList {
			position: relative;
			float: left;
			width: 180px;
			height: 230px;
			background: #f1ad2a;
			margin-top: 50px;
			margin-right: 30px;
			border-bottom: 5px solid #fad65c;
		}

		.recommendList img {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 180px;
			height: 213px;
			z-index: 1;
			transition: .3s;
		}

		.recommendList a:hover img {
			bottom: 10px;
		}

		.recommendList strong {
			position: absolute;
			top: 30px;
			left: 0;
			font: 18px/1 "微软雅黑";
			color: #fff;
			display: block;
			width: 180px;
			text-align: center;
			z-index: 2;
		}

		.recommendList em {
			position: absolute;
			top: 54px;
			left: 0;
			font: 16px/1 "微软雅黑";
			color: #fff;
			display: block;
			width: 180px;
			text-align: center;
			z-index: 2;
		}

		.footer {
			width: 100%;
			height: 60px;
			text-align: center;
			float: none;
		}

		.footer .word1 {
			margin-top: 315px;
			font-size: 12px;
			color: rgb(255, 250, 250);
		}

		.footer .word2 {
			margin-top: -10px;
			font-size: 12px;
			color: rgb(255, 250, 250);
		}
	</style>
</head>

<body>
<div id="contain">
	<div id="list">
		<img src="img/c3.jpg" alt="#">
		<ul>
			<li><a href="#">功能特权</a></li>
			<li><a href="#">游戏特权</a></li>
			<li><a href="#">生活特权</a></li>
			<li><a href="#">会员活动</a></li>
			<li><a href="#">成长体系</a></li>
			<li><a href="#">年费专区</a></li>
			<li><a href="#">超级会员</a></li>
			<li><a href="#" id="login">登录</a></li>
			<li><a href="#" id="open">开通超级会员</a></li>
		</ul>
	</div>
</div>
<div class="banner">
	<img src="" alt="#" class="banner1">
</div>
<div class="circle">
	<ul class="box">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div>
	<ul class="wrapIndex clearfix">
		<li class="recommendList">
			<a href="#">
				<strong>功能特权</strong>
				<em>超级会员&nbsp;特权王者</em>
				<img src="img/c5.jpg">
			</a>
		</li>
		<li class="recommendList">
			<a href="#">
				<strong>装扮特权</strong>
				<em>超级会员&nbsp;我有我的风采</em>
				<img src="img/c6.jpg">
			</a>
		</li>
		<li class="recommendList">
			<a href="#">
				<strong>观影特权</strong>
				<em>观影礼包&nbsp;专属福利</em>
				<img src="img/c7.jpg">
			</a>
		</li>
		<li class="recommendList">
			<a href="#">
				<strong>生活特权</strong>
				<em>超多优惠福利</em>
				<img src="img/c8.jpg">
			</a>
		</li>
	</ul>
</div>
<div class="footer">
	<p class="word1">Copyright © 1998 - 2020. All Rights Reserved</p>
	<p class="word2">版权所有</p>
</div>
</body>

</html>
